<!DOCTYPE html >
<html lang="en" class="room">
<head>
    <meta charset="UTF-8">
    <title>直播间</title>
    <meta name="keywords" content="直播 在线教育 在线考试">
    <meta name="description" content="在线培训+网络直播间+在线考试+电子文凭">
    <meta name="author" content="Jason908 yangxing1002@gmail.com China SH">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="format-detection" content="telephone=no, email=no"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/><!-- 删除苹果默认的工具栏和菜单栏 -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/><!-- 设置苹果工具栏颜色 -->
    <meta name="format-detection" content="telphone=no, email=no"/><!-- 忽略页面中的数字识别为电话，忽略email识别 -->
    <!-- 启用360浏览器的极速模式(webkit) -->
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
    <meta name="HandheldFriendly" content="true">
    <!-- 微软的老式浏览器 -->
    <meta name="MobileOptimized" content="320">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/room.css">
    <link rel="stylesheet" href="js/lib/jquery-barrager/css/barrager.css">
    <link rel="stylesheet" href="css/swiper.css">


</head>
<body class="room">
<div id="header" style="display: none;">
    <a href="/" class="logo">
        <img src="https://i.h2.pdim.gs/f89ab1ce63538491ebec491a509f71ef.png" alt="直播">
    </a>
    <a href="/download.html" class="btn-download">APP观看</a>
</div>
<div class="container">
    <section class="video-container">
        <div class="live-video">
            <div class="h5-live-player-wrapper ">
                <video class="h5-live-player" webkit-playsinline="true" playsinline="true"
                       poster="https://i.h2.pdim.gs/90/e328d0aa9bc6dfe2c38d11e1869657f7/w338/h190.webp" width="100%"
                       height="100%">
                    <source src="http://media.cjatech.com/recordings/z1.imk3.012213/636391077450159855.m3u8">
                </video>
                <div class="h5-live-danmu">


                </div>
                <div class="h5-live-ctrl">
                    <div class="h5-live-info">
                        <div class="h5-live-title">5点去户外吃饭！</div>
                        <div class="h5-live-host-name">刘杀鸡</div>
                        <div class="h5-live-pserson-number">人气：331380</div>
                    </div>
                    <div class="btn-play">开始播放</div>
                    <div class="h5-live-bar">
                        <a href="javascript:" class="btn-pause">暂停</a>
                        <a href="javascript:" class="btn-refresh">刷新</a>
                        <a href="javascript:" class="btn-danmu">弹幕</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="owner">
            <div class="owner-info">
                <h2>李铁牛</h2>
                <p>头就是很铁，各种不服</p>
            </div>
            <div class="room-info">
                <div class="room-id">房间号:666666</div>
                <div class="count">人气：2333</div>
            </div>
        </div>
    </section>
    <div class="main-content">

        <div class="tabs-cnt">
            <a href="javascript:;" class="tabs-list tabs-list-chat active" data-type="chat">
                <span>聊天</span>
            </a>
            <a href="javascript:;" class="tabs-list tabs-list-recommend" data-type="recommend">
                <span>课件</span>
            </a>
            <a href="javascript:;" class="tabs-list tabs-list-recommend" data-type="task">
                <span>任务</span>
            </a>
        </div>
        <div class="main-con">
            <div class="chat-con ps-container ps-active-y" style="height: 289.984px; overflow-y:auto;"
                 data-ps-id="4fe5e7bb-f557-8b68-4188-d27fc43f4d3f"><!-- 聊天 start -->
                <ul class="msg-list">

                    <li class="chat-item chat-send-bamboo">
                        <div class="message">
                            <span class="chat-user-name">奥尼西</span>
                            赠送给<span class="chat-send-bamboo-to">主播</span>
                            <span class="chat-send-bamboo-num">100</span>
                            <span class="chat-send-bamboo-unit">个</span><span class="chat-send-bamboo-gift">竹子</span>
                            <i></i>
                        </div>
                    </li>
                    <li class="chat-item">
                        <div class="message">
                            <span class="chat-user-name">云寒夜冷:</span>
                            <span class="chat-content">户外吃饭呢？</span>
                        </div>
                    </li>

                </ul>
                <div class="room-chat-tips">

                </div>
                <!-- 聊天 end -->

            </div>
            <div class="recommend-con" style="display: none;">recommend</div>
            <div class="task-con" style="display: none;">task</div>
        </div>
    </div>
</div>
<footer class="footer" style="display: block;">
    <div class="comment-con">
        <div class="cmt-phiz">
            <a href="javascript:;">
                <i class="phiz-icon"></i>
            </a>
        </div>
        <div class="cmt-input">
            <div class="input">
                <input placeholder="输入聊天内容...">
            </div>
            <!-- focus 监听输入内容加 highlighte-->
            <button class="btn-cmt-send"><span>发 表</span></button>

        </div>
        <div class="cmt-gift">
            <a href="javascript:;">
                <i class="gift-icon"></i>
            </a>
        </div>
    </div>
    <div class="layer-content phiz-layer-con swiper-container-horizontal">
        <div class="swiper-wrapper phiz-list">

        </div>
        <div class="pagination"></div>
    </div>
</footer>
<script async defer data-main="js/data-main.js" src="js/require.js"></script>
<div class="layer-content gift-layer-con  ">
    <div class="my-money">
        <span class="my-maobi">我的猫币：<em class="maobi-num">0</em></span>
        <span class="my-bamboo">我的竹子：<em class="bamboo-num">36</em></span>
        <a href="javascript:;" class="goto-charge">充值猫币</a>
    </div>
    <div class="swiper-wrapper gift-list">

    </div>
    <div class="pagination"></div>
</div>

<script data-main="js/data-main" src="js/require.js"></script>

<script>

</script>
</body>
</html>